我們昨天學完怎麼利用carbon套件來幫助你判斷時間，我們今天要來學怎麼樣寫footer，讓你的網頁變得更加完整，也可以放在底下幫助使用這個網站的人更加的認識你，或是獲取更多資訊，那我們現在就來看看吧。

那我們打算把footer寫在哪裡呢？我們想直接寫模板裡面，讓所有頁面所呈現的footer都長一樣，所以先讓我們到寫模板的檔案，並增加一個footer的標籤，resources\views\layouts\app.blade.php：

    <footer>
            <div class="bg-gray-100 font-sans antialiased">
                <div class="py-12 px-12 grid grid-cols-12 gap-4">
                    <div class="mx-auto col-span-5 md:col-span-4 lg:col-span-2 sm:px-6  lg:px-8">
                        <p class="text-base text-indigo-600"> {{__("關於")}} </p>
                        <div class="text-sm mt-4">
                            <a href = "{{route('about')}}"> {{ __("關於我們") }} </a>
                        </div>
                        <div class="text-sm mt-2">
                            <a href = "{{route('connection')}}"> {{ __("聯絡我們") }} </a>
                        </div>
                    </div>
                    
                    <div class="mx-auto col-span-5 md:col-span-4 lg:col-span-2 sm:px-6  lg:px-8">
                        <p class="text-base text-indigo-600"> {{__("幫助")}} </p>
                        <div class="text-sm mt-2">
                            <a href = "{{route('announce')}}"> {{ __("發布注意事項") }} </a>
                        </div>
                    </div>
                </div>
            </div>

        </footer>

這邊我們將程式碼分成兩部分，第一部分是「關於」，這裡面我們放了兩個網址分別是關於我們，以及連絡我們；第二部分則是「幫助」，那裏面我們則有發布注意事項。新增了三個網址後，我們不能忘記要去web中增加我們的router，不然之後在導向時我們會找不到該去哪，那我們先到web中吧，routes\web.php：

Route::get('/about', function () {
    return view('footer.about');
})-> name('about');

Route::get('/connection', function () {
    return view('footer.connection');
})-> name('connection');

Route::get('/announce', function () {
    return view('footer.announce');
}) ->middleware(['auth', 'verified']) -> name('announce');

那我們上面兩個：關於我們、聯絡我們是沒有設middleware的，因為我們的設想是讓沒有登錄的人也可以聯絡我們或是查看我們的介紹；但最後一個發布注意事項我們則是限定沒有登錄的人不能查看，因為我們認為若是沒有登錄則不需要知道發布活動的細節。

那這樣子大家就可以照著自己的需求去寫其中需要的blade了，這邊就沒有放我們程式碼了，因為大部分都是文字並沒有用到特別的方法。在大家去設計自己的頁面前，我們要先來介紹我們footer的排版方式，眼尖的人應該有發現這次我們使用了以前都沒有用過的gird去排版，那這是甚麼呢？

• grid
  grid的想法和table很像，他們都是一格一格的可以將資料填進去，我們認為他的好處是比起table他能夠運用的分是更為彈性，但是他的寫法也比table再稍微繁複了一些。
  
  他呈現的方式就如同這樣，他的概念就是一格一格的方格，讓你可以填資料進去，但是你的資料可以一次佔許多格，也可以選擇一次佔一格。而其中你也可以照自己的需求去設定你需要多少格子以做利用。

就我們的來說：

<div class="py-12 px-12 grid grid-cols-12 gap-4">

這邊我們先是設定了 grid 這個方法，接著我們要了12個column grid-cols-12 ，接著我們為他設定每一個column的間隔為4 gap-4。

接著我們就可以來寫我們需要的內容了：

    <div class="mx-auto col-span-5 md:col-span-4 lg:col-span-2 sm:px-6  lg:px-8">
        <p class="text-base text-indigo-600"> {{__("關於")}} </p>
        <div class="text-sm mt-4">
            <a href = "{{route('about')}}"> {{ __("關於我們") }} </a>
        </div>
        <div class="text-sm mt-2">
            <a href = "{{route('connection')}}"> {{ __("聯絡我們") }} </a>
        </div>
    </div>

這邊我們設定這一區塊，在畫面的初始設定這一區塊佔5個column，但是當畫面大小為middle時他佔4個column，在畫面為large時則只需佔兩個，而另外一個區塊的設定也是一樣。在寫網頁時我們都會時不時的切換大小，以檢查是否在每一個大小中的畫面都是和諧的，不過調整過程中可能需要花一點時間。

如果想看看更多關於grid的介紹可以到(https://tailwindcss.com/docs/grid-template-columns )裡面去看看，他還有許多其他的介紹，概念也更加清楚。我們這邊只稍微介紹到我們用到的觀念，若是有需要更多不同的用法可以去找找有沒有符合你所需的。

不知不覺也到了第29天，不知道這期間有沒有為你帶來一些幫助，希望你的網頁已經符合我們第6天所畫的藍圖，希望我們的介紹有沒有為你躲去了滿滿的報錯，而不是和我們一樣碰到一堆奇形怪狀的問題，都快可以出一本日曆了。明天我們會做一個總結，雖然不會寫程式了，但是還是希望你能夠去看看啦。我們明天見，掰掰！